<template>
  <div>
    <template>
      <el-button type="success" @click="dialogVisible = true">添加</el-button>
      <el-button type="danger" @click="del">删除</el-button>
      <el-button type="primary" @click="upd">编辑</el-button>
      <el-button type="primary" @click="Import">导入</el-button>
      <el-button type="primary" @click="Export">导出</el-button>
      <el-table
        :data="tableData"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column prop="plan_Name" label="计划名称"> </el-table-column>
        <el-table-column
          prop="plan_encode"
          label="计划编码"
          width="180"
        ></el-table-column>

        <el-table-column prop="plan_type_Name" label="班级类型">
        </el-table-column>
        <el-table-column prop="shifts" label="地址">
          <template slot-scope="scope">
            <span v-if="scope.row.shifts == 1">白班</span>
            <span v-if="scope.row.shifts == 2">两班倒</span>
            <span v-if="scope.row.shifts == 3">三班倒</span>
          </template>
        </el-table-column>
        <el-table-column prop="Shift" label="地址">
          <template slot-scope="scope">
            <span v-if="scope.row.Shift == 1">按天</span>
            <span v-if="scope.row.Shift == 2">按周</span>
            <span v-if="scope.row.Shift == 3">按月</span>
            <span v-if="scope.row.Shift == 4">按极度</span>
            <span v-if="scope.row.Shift == 5">fen</span>
          </template>
        </el-table-column>
        <el-table-column prop="Remark" label="备注"> </el-table-column>
        <el-table-column prop="Stime" label="开始时间">
          <template slot-scope="scope">
            {{ scope.row.Stime.replace("T", " ").substr(0, 19) }}
          </template>
        </el-table-column>
        <el-table-column prop="Etime" label="结束时间">
          <template slot-scope="scope">
            {{ scope.row.Etime.replace("T", " ").substr(0, 19) }}
          </template>
        </el-table-column>
        <el-table-column prop="State" label="状态">
          <template slot-scope="scope">
            <span v-if="scope.row.State == 1">草稿</span>
            <span v-if="scope.row.State == 2">已完成</span>
          </template>
        </el-table-column>
      </el-table>
    </template>
    <!-- 添加 -->
    <el-dialog title="提示" :visible.sync="dialogVisible" width="70%">
      <span>
        <el-form ref="form" :model="form" label-width="70px">
          <el-form-item label="计划名称">
            <el-input v-model="form.plan_Name"></el-input>
          </el-form-item>
          <el-form-item label="计划编码">
            <el-input v-model="form.plan_encode"></el-input>
          </el-form-item>
          <el-form-item label="班组类型">
            <el-select v-model="form.plan_type_Id" placeholder="请选择">
              <el-option
                v-for="item in type"
                :key="item.plan_type_Id"
                :label="item.plan_type_Name"
                :value="item.plan_type_Id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="状态">
            <el-radio v-model="form.state" label="1">草稿</el-radio>
            <el-radio v-model="form.state" label="2">已完成</el-radio>
          </el-form-item>
          <el-form-item label="开始时间">
            <el-date-picker
              v-model="form.stime"
              type="date"
              placeholder="选择日期"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="结束时间">
            <el-date-picker
              v-model="form.etime"
              type="date"
              placeholder="选择日期"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="轮班方式">
            <el-radio v-model="form.shifts" label="1">白班</el-radio>
            <el-radio v-model="form.shifts" label="2">两班倒</el-radio>
            <el-radio v-model="form.shifts" label="3">三班倒</el-radio>
          </el-form-item>
          <el-form-item label="倒班方式">
            <el-radio disabled v-model="form.shift" label="1">按天</el-radio>
            <el-radio disabled v-model="form.shift" label="2">按周</el-radio>
            <el-radio disabled v-model="form.shift" label="3">按月</el-radio>
            <el-radio disabled v-model="form.shift" label="4">按季度</el-radio>
            <el-radio disabled v-model="form.shift" label="5">fen</el-radio>
          </el-form-item>
          <el-form-item>
            <el-form-item label="备注">
              <el-input
                type="textarea"
                :rows="2"
                placeholder="请输入内容"
                v-model="form.remark"
              >
              </el-input>
            </el-form-item>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="Add">添加</el-button>
            <el-button @click="dialogVisible = false">取消</el-button>
          </el-form-item>
        </el-form>
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false"
          >确定</el-button
        >
      </span>
    </el-dialog>
    <!-- 修改 -->
    <el-dialog title="提示" :visible.sync="dialogVisible111" width="70%">
      <span>
        <el-form ref="form" :model="form1" label-width="70px">
          <el-form-item label="计划名称">
            <el-input v-model="form1.plan_Name"></el-input>
          </el-form-item>
          <el-form-item label="计划编码">
            <el-input v-model="form1.plan_encode"></el-input>
          </el-form-item>
          <el-form-item label="班组类型">
            <el-select v-model="form1.plan_type_Id" placeholder="请选择">
              <el-option
                v-for="item in type"
                :key="item.plan_type_Id"
                :label="item.plan_type_Name"
                :value="item.plan_type_Id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="状态">
            <el-radio v-model="form1.State" :label="1">草稿</el-radio>
            <el-radio v-model="form1.State" :label="2">已完成</el-radio>
          </el-form-item>
          <el-form-item label="开始时间">
            <el-date-picker
              v-model="form1.Stime"
              type="date"
              placeholder="选择日期"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="结束时间">
            <el-date-picker
              v-model="form1.Etime"
              type="date"
              placeholder="选择日期"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="轮班方式">
            <el-radio v-model="form1.shifts" :label="1">白班</el-radio>
            <el-radio v-model="form1.shifts" :label="2">两班倒</el-radio>
            <el-radio v-model="form1.shifts" :label="3">三班倒</el-radio>
          </el-form-item>
          <el-form-item label="倒班方式">
            <el-radio disabled v-model="form1.Shift" :label="1">按天</el-radio>
            <el-radio disabled v-model="form1.Shift" :label="2">按周</el-radio>
            <el-radio disabled v-model="form1.Shift" :label="3">按月</el-radio>
            <el-radio disabled v-model="form1.Shift" :label="4"
              >按季度</el-radio
            >
            <el-radio disabled v-model="form1.Shift" :label="5">fen</el-radio>
          </el-form-item>
          <el-form-item>
            <el-form-item label="备注">
              <el-input
                type="textarea"
                :rows="2"
                placeholder="请输入内容"
                v-model="form.Remark"
              >
              </el-input>
            </el-form-item>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="update">修改</el-button>
            <el-button @click="dialogVisible111 = false">取消</el-button>
          </el-form-item>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="dialogVisible111 = false"
              >确 定</el-button
            >
          </span>
        </el-form>
      </span>
    </el-dialog>
    <!-- 分页 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="page.pageIndex"
      :page-sizes="[1, 3, 5, 7]"
      :page-size="page.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="page.totalCount"
    >
    </el-pagination>
  </div>
</template>
<script>
export default {
  data() {
    return {
      multipleSelection: [],
      dialogVisible: false,
      tableData: [],
      form: {
        radio: "",
        CreatorId: 0,
        createDate: "",
        Updator: 0,
        updateDate: "",
        isDel: false,
        plan_Id: 0,
        plan_Name: "",
        plan_encode: "",
        shifts: "1",
        shift: "1",
        remark: "",
        plan_type_Id: 0 || "",
        state: "",
        stime: "",
        etime: "",
      },
      form1: {
        radio: "",
        CreatorId: 0,
        CreateDate: "",
        Updator: 0,
        UpdateDate: "",
        isDel: false,
        plan_Id: "",
        plan_Name: "",
        plan_encode: "",
        shifts: 1,
        Shift: 1,
        Remark: "",
        plan_type_Id: "",
        Stime: "",
        Etime: "",
        State: 1,
      },
      type: [],
      plan_name: "",
      page: {
        pageIndex: 1,
        pageSize: 5,
        totalCount: 0,
        pageCount: 0,
      },
      dialogVisible111: false,
    };
  },

  methods: {
    handleSizeChange(val) {
      this.page.pageSize = val;
      this.show();
    },
    handleCurrentChange(val) {
      this.page.pageIndex = val;
      this.show();
    },
    //显示列表
    show() {
      this.axios
        .get("http://localhost:5255/api/Plan/GetPlan", {
          params: {
            plan_name: this.plan_name,
            pageIndex: this.page.pageIndex,
            pageSize: this.page.pageSize,
          },
        })
        .then((res) => {
          this.tableData = res.data.list;
          this.page.totalCount = res.data.totalCount;
          this.page.pageCount = res.data.pageCount;
        });
    },
    //批量删除
    del() {
      if (this.multipleSelection.length == 0) {
        this.$message({
          message: "请选择要删除的数据",
          type: "warning",
        });
        return;
      }
      let ps = [];
      this.multipleSelection.forEach((e) => {
        ps.push(e.plan_Id);
      });

      this.axios
        .put("http://localhost:5255/api/Plan/plDelete?ids=" + ps)
        .then((res) => {
          if (res.data == 1) {
            this.$message({
              message: "删除成功",
              type: "success",
            });
            this.show();
          } else {
            this.$message({
              message: "删除失败",
              type: "error",
            });
          }
        });
    },
    //添加
    Add() {
      this.axios
        .post("http://localhost:5255/api/Plan/AddPlan", this.form)
        .then((res) => {
          if (res.data == 1) {
            this.$message({
              message: "添加成功",
              type: "success",
            });
            this.show();
            this.dialogVisible = false;
          } else {
            this.$message({
              message: "添加失败",
              type: "error",
            });
          }
        });
    },
    //显示班组类型
    showtype() {
      this.axios
        .get("http://localhost:5255/api/Plan/GetPlan_Type")
        .then((res) => {
          this.type = res.data;
        });
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    //编辑
    upd() {
      if (this.multipleSelection.length == 0) {
        this.$message({
          message: "请选择要编辑的数据",
          type: "warning",
        });
        return;
      }

      if (!(this.multipleSelection.length == 1)) {
        this.$message({
          message: "只能选择一行编辑的数据",
          type: "warning",
        });
        return;
      }
      this.dialogVisible111 = true;
      let ps = [];
      this.multipleSelection.forEach((e) => {
        ps.push(e.plan_Id);
      });
      this.axios
        .get("http://localhost:5255/api/Plan/GetPlanById?id=" + ps)
        .then((res) => {
          this.form1 = res.data;
        });
    },
    //修改
    update() {
      this.axios
        .put("http://localhost:5255/api/Plan/UpdatePlan", this.form1)
        .then((res) => {
          if (res.data == 1) {
            this.$message({
              message: "修改成功",
              type: "success",
            });
            this.show();
            this.dialogVisible111 = false;
          } else {
            this.$message({
              message: "修改失败",
              type: "error",
            });
          }
        });
    },
  },

  //生命周期钩子函数
  created() {
    this.show();
    this.showtype();
  },
};
</script>
<style>
</style>